<template>
  <div class="introduce">
    <!-- <div class="top">
      <Search />
    </div> -->
    <div class="bottom">
      <p class="header"><span class="title">限时优惠</span></p>
      <div class="drugList">
        <div>
          <div class="left">
            <img
              src="../assets/img/qwqj2.jpg"
              alt=""
              width="150"
              height="118"
            />
          </div>
          <div class="right">
            
            <p class="drugName">
                  <img src="@/assets/火苗.png" alt="" style="width:15px;height:15px">
              <span style=" color: #1890ff;font-size:18px;line-height:16px">热销  </span>
              全屋清洁</p>
            <p>原：<span>￥999.00</span></p>
            <p>优惠：<span>3.5折</span></p>
            <p>现：<span>￥398.00</span></p>
          </div>
        </div>
        <div>
          <div class="left">
            <img
              src="../assets/img/ktqj1.jpg"
              alt=""
              width="150"
              height="118"
            />
          </div>
          <div class="right">
            <p class="drugName">
              <img src="@/assets/火苗.png" alt="" style="width:15px;height:15px">
              <span style=" color: #1890ff;font-size:18px;line-height:16px">热销  </span>全屋空调清洁</p>
            <p>原：<span>￥100.00</span></p>
            <p>优惠：<span>8折</span></p>
            <p>现：<span>￥80.00</span></p>
          </div>
        </div>
           <div>
          <div class="left">
            <img
              src="../assets/img/ktjq2.jpg"
              alt=""
              width="150"
              height="118"
            />
          </div>
          <div class="right">
            <p class="drugName">
              <img src="@/assets/火苗.png" alt="" style="width:15px;height:15px">
              <span style=" color: #1890ff;font-size:18px;line-height:16px">热销  </span>全屋空调清洁</p>
            <p>原：<span>￥100.00</span></p>
            <p>优惠：<span>8折</span></p>
            <p>现：<span>￥80.00</span></p>
          </div>
        </div>
           <div>
          <div class="left">
            <img
              src="../assets/img/ktqj3.jpg"
              alt=""
              width="150"
              height="118"
            />
          </div>
          <div class="right">
            <p class="drugName">
              <img src="@/assets/火苗.png" alt="" style="width:15px;height:15px">
              <span style=" color: #1890ff;font-size:18px;line-height:16px">热销  </span>全屋空调清洁</p>
            <p>原：<span>￥100.00</span></p>
            <p>优惠：<span>8折</span></p>
            <p>现：<span>￥80.00</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
export default {
  components: { Search },
  data() {
    return {};
  },
};
</script>

<style scoped>
.introduce {
 margin: 28px auto 0;
  width: 1200px;
}
.introduce .top {
  height: 46px;
}

.introduce .bottom {
  
  width: 528px;
  height: 161px;
  background-color: #fff;
  border-radius: 8px;
}

.introduce .bottom .header {
  height: 36px;
  line-height: 36px;
  text-align: left;
  margin: 0;
}

.introduce .bottom .header .title {
    /* color: #FF5733; 文字颜色 */
    font-size: 20px; /* 文字大小 */
    font-weight: bold; /* 文字加粗 */
  margin-left: 15px;
  /* font-size: 16px; */
}

.introduce .bottom .drugList {
  display: flex;}

.introduce .bottom .drugList > div {
  width: 300px;
  height: 125px;
  margin: 11px 0 0 0;
  /* text-align: left; */
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  display: flex;
}

.introduce .bottom .drugList > div .left img {
  cursor: pointer;
}
.introduce .bottom .drugList > div .right{
width: 200px;
}
.introduce .bottom .drugList > div .right p {
  /* margin-left: 20px; */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 20px;
  line-height: 23px;
  font-size: 13px;
  
}

.introduce .bottom .drugList > div .drugName {
  cursor: pointer;
  font-weight: bold;
 
}

.introduce .bottom .drugList > div .drugName:hover{
  color: #f34e0d;
}

.introduce .bottom .drugList > div .right p span {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #f34e0d;
}
</style>
